<template>
  <div class="goodslistContainer">
			
              <ul class="mui-table-view"
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="isLoading"
            infinite-scroll-distance="10"
            style="max-height:100vh; overflow-y:auto;"
            >
            <router-link v-for="item in list" :key="item.id" class="mui-table-view-cell mui-media" @click="goToGoodsinfo(item.id)" :to="'/home/goodsinfo/' + item.id" tag="li">
                  
            <img class="mui-media-object mui-pull-left" :src="item.img_url">
						<div class="mui-media-body">
							<h3 class="title">{{item.title}}</h3>
                            <p class="price">
                                <span class="sellPrice">￥{{item.sell_price}}</span>
                                <span class="marketPrice">原价:{{item.market_price}}</span>
                            </p>
                            <p class="stock">库存:{{item.stock}}</p>
                            <button type="button" class="mui-btn mui-btn-danger">立即购买</button>
						</div>
            </router-link>
           
            <!-- 加载动画部分 -->
            <li class="more_loading">
               <mt-spinner type="fading-circle" v-show="is_loading_more"></mt-spinner>
               <span v-show="finished">已经加载全部信息</span>
            </li>
        </ul>

  </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
  data(){
    return{
          list:[], //新闻列表
          isLoading:false, //默认是要响应上滑动作的
          pageindex:1,
          pagesize:10,
          is_loading_more:false, //控制是否显示 加载动画图标
          finished:false,  //控制是否显示已经加载所有数据
    }
  },
  methods:{
      
        loadMore() {
            this.isLoading = true;
            this.is_loading_more = true;
            this.finished = false;
                this.$ajax({
                    method:'get',
                    url:'/goods/goodslist',
                    params:{
                        pageindex:this.pageindex,
                        pagesize:this.pagesize,
                    }
                }).then(response => {
                    console.log(response);
                  var data=response.data;
                    if(data.Status == 0){
                        this.list = this.list.concat(data.Data); //拼接两个数组，不能直接赋值
                       console.log(this.list.length);
                       this.pageindex++;
                       this.isLoading = false;  //允许再响应上滑的动作
                       this.is_loading_more = false;
                        if(data.Data.length < this.pagesize){ //此时请求的数据是最后一页
                            this.isLoading  = true;
                            this.finished = true;
                        }
                    }else{ //没拿到数据
                        this.finished = true;
                        Toast('没拿到数据');
                    }
                })
            },
            goToGoodsinfo:function(goodsId){
              // 这就是所谓的编程式导航
              // 1.给li标签添加@click事件
              // 2.在路由模块router.js，中给路由匹配规则添加name属性
            // 3.在click事件中使用this.$router.push()
              this.$router.push({name:'goodsinfo',params:{id:goodsId}});
            }
  },
  created(){
      this.loadMore();
  }
}
</script>

<style lang="less">
    .goodslistContainer{
      .mui-table-view-cell{
        .mui-media-object{
          max-width: 120px;
          width:100px;
          height:100px;
        }
        .mui-media-body{
          .title{

            font-size: 16px;
            font-weight: bold;
            font-family: "微软雅黑";
            color:#333;
            padding-bottom:18px;
          }
          .price{
            font-size: 12px;
            color:#888;
            margin:0;
            .sellPrice{
              font-size: 18px;
              color:#ce0000;
              font-family: "微软雅黑";
              font-weight: bold;
              margin-right:10px;

            }
            .marketPrice{
              text-decoration: line-through;
            }
          }
          .mui-btn-danger{
            position: absolute;
            bottom:20px;
            right:10px;
          }
        }
      }
      .more_loading{
            font-size: 12px;
            color:#aaa;
            border:none;
            text-align: center;
            .mint-spinner-fading-circle{
                position: relative;
                left:45%;
            }
        }
    }
</style>